{{define "content"}}
<div x-data="systemManager()" x-init="init()">
    <!-- 系统概览 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
                        <i class="fas fa-users text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">系统用户</p>
                    <p class="text-2xl font-semibold text-gray-900" x-text="stats.totalUsers || 0"></p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
                        <i class="fas fa-user-check text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">活跃用户</p>
                    <p class="text-2xl font-semibold text-gray-900" x-text="stats.activeUsers || 0"></p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-purple-500 rounded-md flex items-center justify-center">
                        <i class="fas fa-shield-alt text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">系统角色</p>
                    <p class="text-2xl font-semibold text-gray-900" x-text="stats.totalRoles || 0"></p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-orange-500 rounded-md flex items-center justify-center">
                        <i class="fas fa-history text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">今日操作</p>
                    <p class="text-2xl font-semibold text-gray-900" x-text="stats.todayOperations || 0"></p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 功能导航 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {{if hasPermission "user" "view"}}
            <a href="/system/users" class="block p-6 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg text-white hover:from-blue-600 hover:to-blue-700 transition-all duration-200 transform hover:scale-105">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold">用户管理</h3>
                        <p class="text-blue-100 text-sm">管理系统用户账户</p>
                    </div>
                </div>
            </a>
            {{end}}
            
            {{if hasPermission "role" "view"}}
            <a href="/system/roles" class="block p-6 bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg text-white hover:from-purple-600 hover:to-purple-700 transition-all duration-200 transform hover:scale-105">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold">角色管理</h3>
                        <p class="text-purple-100 text-sm">管理系统角色权限</p>
                    </div>
                </div>
            </a>
            {{end}}
            
            {{if hasPermission "permission" "view"}}
            <button @click="activeTab = 'permissions'" 
                    :class="activeTab === 'permissions' ? 'bg-gradient-to-r from-green-600 to-green-700' : 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'"
                    class="block p-6 rounded-lg text-white transition-all duration-200 transform hover:scale-105">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-key text-2xl"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold">权限管理</h3>
                        <p class="text-green-100 text-sm">查看系统权限配置</p>
                    </div>
                </div>
            </button>
            {{end}}
            
            {{if hasPermission "log" "view"}}
            <button @click="activeTab = 'logs'" 
                    :class="activeTab === 'logs' ? 'bg-gradient-to-r from-orange-600 to-orange-700' : 'bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700'"
                    class="block p-6 rounded-lg text-white transition-all duration-200 transform hover:scale-105">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-history text-2xl"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold">操作日志</h3>
                        <p class="text-orange-100 text-sm">查看系统操作记录</p>
                    </div>
                </div>
            </button>
            {{end}}
        </div>
        
        <!-- 传统标签导航（保留用于权限和日志） -->
        <div class="border-b border-gray-200 mt-6" x-show="activeTab === 'permissions' || activeTab === 'logs'">
            <nav class="-mb-px flex space-x-8">
                {{if hasPermission "permission" "view"}}
                <button @click="activeTab = 'permissions'" 
                        :class="activeTab === 'permissions' ? 'border-green-500 text-green-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
                    <i class="fas fa-key mr-2"></i>
                    权限管理
                </button>
                {{end}}
                {{if hasPermission "log" "view"}}
                <button @click="activeTab = 'logs'" 
                        :class="activeTab === 'logs' ? 'border-orange-500 text-orange-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
                    <i class="fas fa-history mr-2"></i>
                    操作日志
                </button>
                {{end}}
            </nav>
        </div>
    </div>
    
    <!-- 用户管理 -->
    <div x-show="activeTab === 'users'" class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- 用户管理头部 -->
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">用户管理</h3>
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <input type="text" x-model="userSearch" @input="searchUsers()" placeholder="搜索用户..." class="pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                    </div>
                    {{if hasPermission "user" "create"}}
                    <button @click="showCreateUserModal = true" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                        <i class="fas fa-plus mr-2"></i>
                        添加用户
                    </button>
                    {{end}}
                </div>
            </div>
        </div>
        
        <!-- 用户列表 -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            用户信息
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            角色
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            状态
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            最后登录
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="user in users" :key="user.id">
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium" x-text="user.username.charAt(0).toUpperCase()"></div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900" x-text="user.username"></div>
                                        <div class="text-sm text-gray-500" x-text="user.email"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-wrap gap-1">
                                    <template x-for="role in (user.roles || [])" :key="role.id">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800" x-text="role.name"></span>
                                    </template>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" 
                                      :class="user.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" 
                                      x-text="user.status === 'active' ? '活跃' : '停用'"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span x-text="formatDateTime(user.last_login_at)"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end space-x-2">
                                    {{if hasPermission "user" "update"}}
                                    <button @click="editUser(user)" class="text-indigo-600 hover:text-indigo-900" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button @click="manageUserRoles(user)" class="text-purple-600 hover:text-purple-900" title="管理角色">
                                        <i class="fas fa-user-cog"></i>
                                    </button>
                                    {{end}}
                                    {{if hasPermission "user" "delete"}}
                                    <button @click="deleteUser(user)" class="text-red-600 hover:text-red-900" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    {{end}}
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 角色管理 -->
    <div x-show="activeTab === 'roles'" class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- 角色管理头部 -->
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">角色管理</h3>
                {{if hasPermission "role" "create"}}
                <button @click="showCreateRoleModal = true" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                    <i class="fas fa-plus mr-2"></i>
                    添加角色
                </button>
                {{end}}
            </div>
        </div>
        
        <!-- 角色列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
            <template x-for="role in roles" :key="role.id">
                <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h4 class="text-lg font-medium text-gray-900" x-text="role.name"></h4>
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" 
                              :class="role.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" 
                              x-text="role.status === 'active' ? '启用' : '停用'"></span>
                    </div>
                    
                    <p class="text-sm text-gray-600 mb-4" x-text="role.description || '暂无描述'"></p>
                    
                    <div class="mb-4">
                        <div class="text-sm font-medium text-gray-700 mb-2">权限数量</div>
                        <div class="text-2xl font-bold text-blue-600" x-text="(role.permissions || []).length"></div>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-500">
                            用户数: <span class="font-medium" x-text="role.user_count || 0"></span>
                        </div>
                        <div class="flex items-center space-x-2">
                            {{if hasPermission "role" "update"}}
                            <button @click="editRole(role)" class="text-indigo-600 hover:text-indigo-900" title="编辑">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button @click="manageRolePermissions(role)" class="text-purple-600 hover:text-purple-900" title="管理权限">
                                <i class="fas fa-key"></i>
                            </button>
                            {{end}}
                            {{if hasPermission "role" "delete"}}
                            <button @click="deleteRole(role)" class="text-red-600 hover:text-red-900" title="删除">
                                <i class="fas fa-trash"></i>
                            </button>
                            {{end}}
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
    
    <!-- 权限管理 -->
    <div x-show="activeTab === 'permissions'" class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- 权限管理头部 -->
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">权限管理</h3>
                <div class="flex items-center space-x-3">
                    <select x-model="permissionResourceFilter" @change="filterPermissions()" class="border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">全部资源</option>
                        <option value="customer">客户管理</option>
                        <option value="partner">合作机构</option>
                        <option value="push">推送管理</option>
                        <option value="user">用户管理</option>
                        <option value="role">角色管理</option>
                        <option value="system">系统管理</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- 权限列表 -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            权限名称
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            资源
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            描述
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            关联角色
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="permission in filteredPermissions" :key="permission.id">
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900" x-text="permission.display_name"></div>
                                <div class="text-sm text-gray-500" x-text="permission.name"></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800" x-text="permission.resource"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800" x-text="permission.action"></span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900" x-text="permission.description || '暂无描述'"></div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-wrap gap-1">
                                    <template x-for="role in (permission.roles || [])" :key="role.id">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800" x-text="role.name"></span>
                                    </template>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 操作日志 -->
    <div x-show="activeTab === 'logs'" class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- 日志头部 -->
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">操作日志</h3>
                <div class="flex items-center space-x-3">
                    <select x-model="logActionFilter" @change="filterLogs()" class="border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">全部操作</option>
                        <option value="create">创建</option>
                        <option value="update">更新</option>
                        <option value="delete">删除</option>
                        <option value="login">登录</option>
                        <option value="logout">登出</option>
                    </select>
                    <input type="date" x-model="logDateFilter" @change="filterLogs()" class="border border-gray-300 rounded-lg px-3 py-2">
                </div>
            </div>
        </div>
        
        <!-- 日志列表 -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作时间
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作用户
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作类型
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作对象
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作描述
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            IP地址
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="log in logs" :key="log.id">
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span x-text="formatDateTime(log.created_at)"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900" x-text="log.user?.username || '系统'"></div>
                                <div class="text-sm text-gray-500" x-text="log.user?.email || ''"></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" 
                                      :class="getActionClass(log.action)" 
                                      x-text="getActionText(log.action)"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900" x-text="log.resource"></div>
                                <div class="text-sm text-gray-500" x-text="log.resource_id ? 'ID: ' + log.resource_id : ''"></div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900" x-text="log.description"></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span x-text="log.ip_address || '-'"></span>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        
        <!-- 日志分页 -->
        <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
            <div class="flex items-center justify-between">
                <div class="flex-1 flex justify-between sm:hidden">
                    <button @click="prevLogPage()" :disabled="logPage <= 1" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50">
                        上一页
                    </button>
                    <button @click="nextLogPage()" :disabled="logPage >= logTotalPages" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50">
                        下一页
                    </button>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium" x-text="(logPage - 1) * logLimit + 1"></span> 到 
                            <span class="font-medium" x-text="Math.min(logPage * logLimit, logTotal)"></span> 条，
                            共 <span class="font-medium" x-text="logTotal"></span> 条日志
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                            <button @click="prevLogPage()" :disabled="logPage <= 1" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button @click="nextLogPage()" :disabled="logPage >= logTotalPages" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 创建用户模态框 -->
    <div x-show="showCreateUserModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeUserModal()"></div>
            
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <form @submit.prevent="saveUser()">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="mb-4">
                            <h3 class="text-lg font-medium text-gray-900">添加用户</h3>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">用户名 *</label>
                                <input type="text" x-model="userForm.username" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">邮箱 *</label>
                                <input type="email" x-model="userForm.email" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">密码 *</label>
                                <input type="password" x-model="userForm.password" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                                <select x-model="userForm.status" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                                    <option value="active">活跃</option>
                                    <option value="inactive">停用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                            创建
                        </button>
                        <button type="button" @click="closeUserModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">
                            取消
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function systemManager() {
    return {
        // 当前标签页
        activeTab: 'users',
        
        // 统计数据
        stats: {},
        
        // 用户管理
        users: [],
        userSearch: '',
        showCreateUserModal: false,
        userForm: {
            username: '',
            email: '',
            password: '',
            status: 'active'
        },
        
        // 角色管理
        roles: [],
        showCreateRoleModal: false,
        
        // 权限管理
        permissions: [],
        filteredPermissions: [],
        permissionResourceFilter: '',
        
        // 操作日志
        logs: [],
        logPage: 1,
        logLimit: 20,
        logTotal: 0,
        logTotalPages: 0,
        logActionFilter: '',
        logDateFilter: '',
        
        // 初始化
        async init() {
            await Promise.all([
                this.loadStats(),
                this.loadUsers(),
                this.loadRoles(),
                this.loadPermissions(),
                this.loadLogs()
            ]);
        },
        
        // 加载统计数据
        async loadStats() {
            try {
                const response = await fetch('/api/system/stats');
                const data = await response.json();
                
                if (data.success) {
                    this.stats = data.data;
                }
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        },
        
        // 用户管理相关
        async loadUsers() {
            try {
                const params = new URLSearchParams({
                    search: this.userSearch
                });
                
                const response = await fetch(`/api/system/users?${params}`);
                const data = await response.json();
                
                if (data.success) {
                    this.users = data.data;
                }
            } catch (error) {
                console.error('加载用户列表失败:', error);
            }
        },
        
        searchUsers() {
            this.loadUsers();
        },
        
        async saveUser() {
            try {
                const response = await fetch('/api/system/users', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.userForm)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    utils.showMessage('创建用户成功', 'success');
                    this.closeUserModal();
                    await Promise.all([
                        this.loadUsers(),
                        this.loadStats()
                    ]);
                } else {
                    utils.showMessage(data.message || '创建用户失败', 'error');
                }
            } catch (error) {
                utils.showMessage('网络错误', 'error');
            }
        },
        
        closeUserModal() {
            this.showCreateUserModal = false;
            this.userForm = {
                username: '',
                email: '',
                password: '',
                status: 'active'
            };
        },
        
        editUser(user) {
            // 实现编辑用户功能
            console.log('编辑用户:', user);
        },
        
        manageUserRoles(user) {
            // 实现用户角色管理功能
            console.log('管理用户角色:', user);
        },
        
        async deleteUser(user) {
            if (!confirm(`确定要删除用户"${user.username}"吗？`)) {
                return;
            }
            
            try {
                const response = await fetch(`/api/system/users/${user.id}`, {
                    method: 'DELETE'
                });
                
                const data = await response.json();
                
                if (data.success) {
                    utils.showMessage('删除用户成功', 'success');
                    await Promise.all([
                        this.loadUsers(),
                        this.loadStats()
                    ]);
                } else {
                    utils.showMessage(data.message || '删除用户失败', 'error');
                }
            } catch (error) {
                utils.showMessage('网络错误', 'error');
            }
        },
        
        // 角色管理相关
        async loadRoles() {
            try {
                const response = await fetch('/api/system/roles');
                const data = await response.json();
                
                if (data.success) {
                    this.roles = data.data;
                }
            } catch (error) {
                console.error('加载角色列表失败:', error);
            }
        },
        
        editRole(role) {
            // 实现编辑角色功能
            console.log('编辑角色:', role);
        },
        
        manageRolePermissions(role) {
            // 实现角色权限管理功能
            console.log('管理角色权限:', role);
        },
        
        async deleteRole(role) {
            if (!confirm(`确定要删除角色"${role.name}"吗？`)) {
                return;
            }
            
            try {
                const response = await fetch(`/api/system/roles/${role.id}`, {
                    method: 'DELETE'
                });
                
                const data = await response.json();
                
                if (data.success) {
                    utils.showMessage('删除角色成功', 'success');
                    await Promise.all([
                        this.loadRoles(),
                        this.loadStats()
                    ]);
                } else {
                    utils.showMessage(data.message || '删除角色失败', 'error');
                }
            } catch (error) {
                utils.showMessage('网络错误', 'error');
            }
        },
        
        // 权限管理相关
        async loadPermissions() {
            try {
                const response = await fetch('/api/system/permissions');
                const data = await response.json();
                
                if (data.success) {
                    this.permissions = data.data;
                    this.filteredPermissions = data.data;
                }
            } catch (error) {
                console.error('加载权限列表失败:', error);
            }
        },
        
        filterPermissions() {
            if (!this.permissionResourceFilter) {
                this.filteredPermissions = this.permissions;
            } else {
                this.filteredPermissions = this.permissions.filter(permission => 
                    permission.resource === this.permissionResourceFilter
                );
            }
        },
        
        // 操作日志相关
        async loadLogs() {
            try {
                const params = new URLSearchParams({
                    page: this.logPage,
                    limit: this.logLimit,
                    action: this.logActionFilter,
                    date: this.logDateFilter
                });
                
                const response = await fetch(`/api/system/logs?${params}`);
                const data = await response.json();
                
                if (data.success) {
                    this.logs = data.data.logs;
                    this.logTotal = data.data.total;
                    this.logTotalPages = Math.ceil(this.logTotal / this.logLimit);
                }
            } catch (error) {
                console.error('加载操作日志失败:', error);
            }
        },
        
        filterLogs() {
            this.logPage = 1;
            this.loadLogs();
        },
        
        prevLogPage() {
            if (this.logPage > 1) {
                this.logPage--;
                this.loadLogs();
            }
        },
        
        nextLogPage() {
            if (this.logPage < this.logTotalPages) {
                this.logPage++;
                this.loadLogs();
            }
        },
        
        // 工具函数
        formatDateTime(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN');
        },
        
        getActionClass(action) {
            const classes = {
                'create': 'bg-green-100 text-green-800',
                'update': 'bg-blue-100 text-blue-800',
                'delete': 'bg-red-100 text-red-800',
                'login': 'bg-purple-100 text-purple-800',
                'logout': 'bg-gray-100 text-gray-800'
            };
            return classes[action] || 'bg-gray-100 text-gray-800';
        },
        
        getActionText(action) {
            const texts = {
                'create': '创建',
                'update': '更新',
                'delete': '删除',
                'login': '登录',
                'logout': '登出'
            };
            return texts[action] || action;
        }
    }
}
</script>
{{end}}